<template>
    <div class="main">
        <div class="side">
            <div style="height:100vh">
                <el-collapse v-model="active">
                    <el-collapse-item title="部门列表" name="1" >
                        <el-tree :data="sideList" :highlight-current="true"  :props="{label: 'name'}" node-key="id" @node-click="handleNodeClick"></el-tree>
                        <!-- <el-tree :data="sideList" :highlight-current="true" :default-expanded-keys="defaultExpandedKeys" :props="{label: 'name'}" node-key="id" @node-click="handleNodeClick"></el-tree> -->
                    </el-collapse-item>
                </el-collapse>
                <div class="singlecheckout" @click="search">
                    <span class="small">用户检索与导出</span>
                    <i class="el-collapse-item__arrow el-icon-arrow-right"></i>
                </div>
                <div class="singlecheckout" @click="importUser">
                    <span class="small">用户导入</span>
                    <i class="el-collapse-item__arrow el-icon-arrow-right"></i>
                </div>

            </div>
            
        </div>
            <router-view :sideList="sideList"></router-view>
 
    </div>
    
</template>
<script>
    import $ from "jquery";

    export default {
        data() {
            return {
                current: 1,
                size: 20,
                page: {},
                keyword: "",
                timer: null,
                key: 0,
                mode: "",
                single:{},
                sideList:[],
                active:["1"],
                defaultExpandedKeys:[],
                tableData: []
                        }
                },
        watch: {
            keyword(nv) {
                this.key = Math.random();
                if (this.timer) {
                    clearTimeout(this.timer);
                }
                this.timer = setTimeout(() => {
                    this.load()
                }, 200);
            }
        },
        mounted() {
            this.load()
        },
        methods: {
            load() {

                this.loading()
                $.get("/api/auto/org/getDList",{},Response => {
                    if(Response.success){
                        this.sideList = Response.data;
                        if(this.sideList.length != 0){
                            this.defaultExpandedKeys = [this.sideList[0].id]
                            console.log(this.defaultExpandedKeys)
                        }
                    }else{
                        this.$message.error(Response.errMessage);
                    }
                    this.loading(false)
                })
            },
            handleNodeClick:function(data){
                this.getdepartmentUser(data.id)
            },
            getdepartmentUser(id){
                this.$router.push({path:"/user/userTable",query:{ "id": id }})
                
            },
            search(){
                this.$router.push({path:"/user/search"})
            },
            importUser(){
                this.$router.push({path:"/user/import"})
            },
            exportUser(){

            }

        }
    }
</script>

<style scoped lang="less">
    .box {
        display: flex;
        flex-direction: column;
    }

    .page {
        text-align: right;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .action {
        display: flex;
        align-items: center;

        i {
            cursor: pointer;
            font-size: 16px;
            margin-left: 5px;
            margin-right: 5px;
        }
    }
    .main{
        display: flex;
        height:100%;
        .side{
            max-width:250px;
            width:18rem;
            overflow-y: auto;
            margin: 0 10px 0 10px;
            .worker{
                padding-left:20px
            }
        }
        .h100{
            width: 100%;
            // overflow: auto;
            padding:10px;
            box-sizing: border-box;

        }
    }
    .singlecheckout{
        height:48px;
        display:flex;
        align-items: center;
        cursor: pointer;
        border-bottom: 1px solid #EBEEF5;
        span{
            font-size: 13px;
        }
    }
</style>